<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>个人信息</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css">
		<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
		<style type="text/css">
		.dataTables_paginate span {
			display: none!important;
		}
		table.dataTable.no-footer, .dataTables_wrapper.no-footer .dataTables_scrollBody {
			border-bottom:none;
		}
		.nav-tabs {
			font-size:0;
			background-color:white;
			position: relative;
		}
 		.nav-tabs > li {
			min-width: 20%;
			padding-top:5px;
		}
		.nav-tabs > li:last-child {
			
		}
		 .nav-tabs > li > a {
			font-size:14px;
			padding:5px 10px;
		} 		
/* 		.dataTables_wrapper {
			position: fixed;
			width:100%;
		} */
		.nav-tabs > button {
			padding:2px 4px;
			font-size:14px;
			top:50%;
			right:15px;
			transform:translateY(-50%);
			position: absolute;
		}
		.clearfix:after {
			content:"";
			display:block;
			clear:both;
		}
		tbody td {
			/* white-space:nowrap; */
			text-align: left;
		}
		tbody tr:first-child td {
			border-top:none;
		}
		.tabLi {
			cursor: pointer;
		}
		.hidden-td {
			display:none;
		}
		#table_id_example td > .noread, .noread .important {
		color:red;}
		#table_id_example td > .noread > b {
			color:black;
		}
		#table_id_example td {
			font-size:14px!important;
		}
		.noread{
			 font-size:14px!important; 
		}
		
		.important{
			color: red !important;
			font-size: 14px !important;
		}
		
		/* .read{
			margin-left: 15px;
			font-size: 14px !important;
		} */
		.glyphicon{
			font-size: 14px;
		}
		
		</style>
	</head>

	<body>
		<div id="div-i-header" class="col-xs-12 col-sm-4 col-sm-offset-4 text-center bg-theme" style="line-height:40px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding:0;">
			<div style="position: relative;text-align: center">
				<a href="javascript:" onclick="self.location=document.referrer;" class="glyphicon glyphicon-chevron-left" style="cursor:pointer;color: white;font-size: 20px;position: absolute;top:50%;left:10px;transform:translateY(-50%);"></a>
				<strong style="font-size: 20px;color: white;">系统通知</strong>
			</div>
		<ul class="nav nav-tabs clearfix" style="line-height: 40px !important;">
			<li class="tabLi active" data-value="0" data-index="1">
				<a>你有新消息</a>
			</li>
			<li class="tabLi" data-value="1" data-index="2">
				<a>已读消息</a>
			</li>
			<button class="btn btn-success" id="btn-i-markRead">标记为已读</button>	
		</ul>			
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="padding:0;" >
		<div style="height:81px;"></div>
<%-- 		${sysNots} --%>
<table id="table_id_example" class="table table-striped">
		<thead style="display:none;">
			<tr>
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>	
		</div>
	</body>
	<script type="text/javascript">
	stopUserScaleScreenIOS()	
	var REST_HEIGHT = 0
    var getRestHeight = function() {
		var allHeight = document.documentElement.clientHeight
		var headerHeight = document.querySelector("#div-i-header").clientHeight
		REST_HEIGHT = allHeight - headerHeight - 86.08
	}
	getRestHeight()
	
	

	
	
	
	 function DataTable01(){
			var oTable=	$("#table_id_example").DataTable({
					 "bProcessing" : false, // 是否显示取数据时的那个等待提示
					"bServerSide" : true,//这个用来指明是通过服务端来取数据
					 "bPaginate" : true, //是否显示分页 
					"sAjaxSource" : "/u/systemNoticeWD.do",//这个是请求的地址
					"fnServerData" : retrieveData, // 获取数据的处理函数
					"destroy":true,
				       // "bPaginate": true,
				       // "bPaginate": true,
				      "bLengthChange": true,      
				      "bSort": false,
				      // "bInfo": true,
				      "bAutoWidth": false,
				      "scrollY": REST_HEIGHT + "px",
				      "scrollX": true,
				      "scrollCollapse": true,	      
				      //"dom": `ft<"tableToolBar" p<"lengthWrapper" l>i>`,
				      "dom": 't<"toolbar" pi>',
			//	         "bServerSide":true,
				      'aLengthMenu':[10],
				       "searching": true,  
				      "stateSave": true,
				       /* "searching": false,   */ 
				      /*  "pagingType": "simple_numbers",
				       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  */
				       "stateDuration": 365,
				       "language": {//语言设置  
				    	   "zeroRecords": "没有消息",     
				            "sInfo": "第 _PAGE_ / _PAGES_ 页",     
				            "info": "没有数据",     
				            "oPaginate": {     
				                "sFirst": "首页",     
				                "sPrevious": "上一页",     
				                "sNext": "下一页",     
				                "sLast": "尾页"    
				          	},
				            "search":"",
				            "searchPlaceholder": "请输入关键字",
				            "infoFiltered":   "",
				            "infoEmpty":      "",
				         },  
				        "aoColumns": [
				        	 { "data": "content","className": "content-td" },
		                     { "data": "statu", "className": "state-td hidden-td" },
		                     { "data": "id", "className": "id-td hidden-td" },
		                 ], 
				})
				function retrieveData(sSource, aoData, fnCallback) {
							$.ajax({
								url : sSource,//这个就是请求地址对应sAjaxSource
								data : {
									"pageCount":aoData[0].value,
									"startIndex":aoData[3].value,
									"lineCount":aoData[4].value,
								},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
								type : 'post',
								dataType : 'json',
								async : false,
								success : function(result) { 
									var newData = result.aaData
									var newJSON = []
					    	    	 for (var i = 0; i < newData.length; i++) {
					    	    		 var item = newData[i]
					    	    		 if(item.cname=="-"){
					    	    			 item.cname=item.cname.replace("-","")
					    	    		 }
					    	    		 item.createtime=item.createtime.substring(5,item.createtime.length)
					    	    		 var newObj = {
					    	    				 statu: item.statu,
					    	    				 id: item.id
					    	    		 }
					    	    		 if (item.statu === 0) {
					    	    			 newObj.content = 	"<span class='noread'> "+ "<span class='glyphicon glyphicon-heart' style='color:red;margin-right:5px;'></span>"+ item.createtime + ": <span class='important'><span class='glyphicon glyphicon-apple' style='color:#ff00ce;margin-right:5px;'>" + item.cname +"</span></span>" + item.bdtype + " <span class='important'>" + item.bdjine + "元 </span></span>"
					    	    			 
					    	    		 } else {
					    	    			  newObj.content ="<span class='glyphicon glyphicon-heart' style='color:red;margin-right:5px;margin-right:5px;'></span>"+item.createtime + ':&nbsp;' + "<span class='glyphicon glyphicon-apple' style='color:#ff00ce'>"+item.cname+"</span>"+ item.bdtype + '&nbsp;'+item.bdjine + "元" 
					    	    			 
					    	    		 }
					    	    		 newJSON.push(newObj) 
					    	    	 }
									
									result.aaData = newJSON;
									fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
								}
							})
					}
				}
				 DataTable01()
	
/* 	$("#table_id_example").DataTable({
	      // "bPaginate": true,
	      "bLengthChange": true,      
	      "bSort": false,
	      // "bInfo": true,
	      "bAutoWidth": false,
	      "scrollY": REST_HEIGHT + "px",
	      "scrollX": true,
	      "scrollCollapse": true,	      
	      //"dom": `ft<"tableToolBar" p<"lengthWrapper" l>i>`,
	      "dom": 't<"toolbar" pi>',
//	         "bServerSide":true,
	      'aLengthMenu':[10],
	       "searching": true,  
	      "stateSave": true,
	      "stateDuration": 365,
	         "columns": [
	                     { "data": "content","className": "content-td" },
	                     { "data": "statu", "className": "state-td hidden-td" },
	                     { "data": "id", "className": "id-td hidden-td" },
	                 ],	
	      "ajax": {
    	  	  "type": 'POST',
    	      "url":"/u/systemNoticeWD.do", 
    	      "dataSrc": function(json) {
    	    	  var newJSON = []
    	    	 for (var i = 0; i < json.data.length; i++) {
    	    		 var item = json.data[i]
    	    		 if(item.cname=="-"){
    	    			 item.cname=item.cname.replace("-","")
    	    		 }
    	    		 item.createtime=item.createtime.substring(5,item.createtime.length)
    	    		 var newObj = {
    	    				 statu: item.statu,
    	    				 id: item.id
    	    		 }
    	    		 if (item.statu === 0) {
    	    			 newObj.content = 	"<span class='noread'> "+ "<span class='glyphicon glyphicon-heart' style='color:red;margin-right:5px;'></span>"+ item.createtime + ": <span class='important'><span class='glyphicon glyphicon-apple' style='color:#ff00ce;margin-right:5px;'>" + item.cname +"</span></span>" + item.bdtype + " <span class='important'>" + item.bdjine + "元 </span></span>"
    	    			 
    	    		 } else {
    	    			  newObj.content ="<span class='glyphicon glyphicon-heart' style='color:red;margin-right:5px;margin-right:5px;'></span>"+item.createtime + ':&nbsp;' + "<span class='glyphicon glyphicon-apple' style='color:#ff00ce'>"+item.cname+"</span>"+ item.bdtype + '&nbsp;'+item.bdjine + "元" 
    	    			 
    	    		 }
    	    		 newJSON.push(newObj) 
    	    	 }
    	    	 return newJSON
    	      } 
	      },	
//	    "searching": true,l
	       "language": {//语言设置  
	            "zeroRecords": "没有消息",     
	            "sInfo": "第 _PAGE_ / _PAGES_ 页",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "上一页",     
	                "sNext": "下一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"",
	            "searchPlaceholder": "请输入关键字",
	            "infoFiltered":   "",
	            "infoEmpty":      "",
	         }
	    }) */
	var setOneElementHasSingleClass = function(element, className) {
	    var allClassNameELements = document.querySelectorAll("." + className)
	    for (var i = 0; i < allClassNameELements.length; i++) {
	        var item = allClassNameELements[i]
	        item.classList.remove(className)
	    }
	    element.classList.add(className)
	}	  
	
	var bindOneActiveLi = function() {
		var lis = document.querySelectorAll(".tabLi")
		for (var i = 0; i < lis.length; i++) {
			var item = lis[i]
			item.addEventListener(getEndClickEvent(), function(event) {   //点击全部消息，未读和已读之间的切换
				var self = event.currentTarget
				setOneElementHasSingleClass(self, "active")
				if($(self).find("a").text()=="已读消息"){
					$("#btn-i-markRead").attr('disabled',true);
				}else{
					$("#btn-i-markRead").attr('disabled',false);
				}
				/* $("#table_id_example").DataTable().column(1).search(self.dataset.value).draw()
				 document.querySelector("#btn-i-markRead").disabled = self.dataset.value == "1" */ 
					 var oTable=	$("#table_id_example").DataTable({
						 "bProcessing" : false, // 是否显示取数据时的那个等待提示
						"bServerSide" : true,//这个用来指明是通过服务端来取数据
						 "bPaginate" : true, //是否显示分页 
						"sAjaxSource" : "/u/systemNoticeYD.do",//这个是请求的地址
						"fnServerData" : retrieveData, // 获取数据的处理函数
						"destroy":true,
					       // "bPaginate": true,
					       // "bPaginate": true,
					      "bLengthChange": true,      
					      "bSort": false,
					      // "bInfo": true,
					      "bAutoWidth": false,
					       "scrollY": REST_HEIGHT + "px",
					       "scrollX": true, 
					       "scrollCollapse": true,	     
					      //"dom": `ft<"tableToolBar" p<"lengthWrapper" l>i>`,
					      "dom": 't<"toolbar" pi>',
				//	         "bServerSide":true,
					      'aLengthMenu':[10],
					       "searching": true,  
					      "stateSave": true,
					       /* "searching": false,   */ 
					      /*  "pagingType": "simple_numbers",
					       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  */
					       "stateDuration": 365,
					       "language": {//语言设置  
					    	   "zeroRecords": "没有消息",     
					            "sInfo": "第 _PAGE_ / _PAGES_ 页",     
					            "info": "没有数据",     
					            "oPaginate": {     
					                "sFirst": "首页",     
					                "sPrevious": "上一页",     
					                "sNext": "下一页",     
					                "sLast": "尾页"    
					          	},
					            "search":"",
					            "searchPlaceholder": "请输入关键字",
					            "infoFiltered":   "",
					            "infoEmpty":      "",
					         },  
					        "aoColumns": [
					        	 { "data": "content","className": "content-td" },
			                     { "data": "statu", "className": "state-td hidden-td" },
			                     { "data": "id", "className": "id-td hidden-td" },
			                 ], 
					})
					function retrieveData(sSource, aoData, fnCallback) {
								$.ajax({
									url : sSource,//这个就是请求地址对应sAjaxSource
									data : {
										"pageCount":aoData[0].value,
										"startIndex":aoData[3].value,
										"lineCount":aoData[4].value,
									},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
									type : 'post',
									dataType : 'json',
									async : false,
									success : function(result) { 
										var newData = result.aaData
										var newJSON = []
						    	    	 for (var i = 0; i < newData.length; i++) {
						    	    		 var item = newData[i]
						    	    		 if(item.cname=="-"){
						    	    			 item.cname=item.cname.replace("-","")
						    	    		 }
						    	    		 item.createtime=item.createtime.substring(5,item.createtime.length)
						    	    		 var newObj = {
						    	    				 statu: item.statu,
						    	    				 id: item.id
						    	    		 }
						    	    		 if (item.statu === 0) {
						    	    			 newObj.content = 	"<span class='noread'> "+ "<span class='glyphicon glyphicon-heart' style='color:red;margin-right:5px;'></span>"+ item.createtime + ": <span class='important'><span class='glyphicon glyphicon-apple' style='color:#ff00ce;margin-right:5px;'></span>" + item.cname +"</span>" + item.bdtype + " <span class='important'>" + item.bdjine + "元 </span></span>"
						    	    			 
						    	    		 } else {
						    	    			  newObj.content ="<span class='glyphicon glyphicon-heart' style='color:red;margin-right:5px;margin-right:5px;'></span>"+item.createtime + ':&nbsp;' + "<span class='glyphicon glyphicon-apple' style='color:#ff00ce'></span>"+item.cname+item.bdtype + '&nbsp;'+item.bdjine + "元" 
						    	    			 
						    	    		 }
						    	    		 newJSON.push(newObj) 
						    	    	 }
										
										result.aaData = newJSON;
										fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
									}
								})
						}
				
				if($(this).find("a").text()=="你有新消息"){
					 DataTable01()
				} 
				 
				/* $("#table_id_example").DataTable().ajax.url('/u/systemNoticeYD.do').load(); */
			})
		}
	}
	
	var bindMarkReadBtnEvent = function() {
		var btn = document.querySelector("#btn-i-markRead")
		btn.addEventListener(getEndClickEvent(), function(event) {
			if($(this).prev().hasClass("active")){
				return
			}else{
				var trs = document.querySelectorAll("#table_id_example tbody tr")
				 if (trs.length == 0) {
					return
				} 
				if(trs[0].querySelector(".id-td")){
					var ids = trs[0].querySelector(".id-td").innerHTML
					for (var j = 1; j < trs.length; j++) {
						var item = trs[j]
						if (item.querySelector(".state-td").innerHTML == "0") {
							var value = "," + item.querySelector(".id-td").innerHTML
							ids += value					
						}
					}
					var urlPath = "/u/duliushui.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {ids: ids},
						success: function(data) {
							 DataTable01()
							$("#table_id_example").DataTable().ajax.reload();
						},
						error: function(status) {
						}
					} 
					 ajax(newRequest) 
				}
			}
		}) 
	}
	bindMarkReadBtnEvent()
	bindOneActiveLi()

	</script>
</html>